<!-- 圈子-推荐-详情-个人中心 -->
<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="tabbar">
			<view class="tabbar-title" :style="{'paddingTop': tabbarTop}">
				<view class="flex align-center" @click="back" :style="{'height': height,'width': height}">
					<view class="icon">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/linkbank.png" mode="">
						</image>
					</view>
				</view>
				<view class="title flex justify-center align-center">
					<view class="imgs flex justify-center align-center">
						<image
							:src="iteme.avatar"
							mode=""></image>
					</view>
					<view class="vip flex justify-center align-center">
						<view class="vipimg">
							<image :src="img(iteme.grade)"
								mode=""></image>
						</view>
					</view>
				</view>
				<view class="right flex" style="position: absolute;right: 7rpx;" :style="{'top': piddheight}">
					<view class="lahei" @click="cancel">
						<image v-if="info.pullBlack" src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/perssonal/pullblack.png"
							mode=""></image>
						<image v-if="!info.pullBlack" src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/perssonal/lahei.png"
							mode=""></image>
					</view>
					<!-- <view class="shouc" @click="focus">
						<image v-if="info.attentionType" src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/perssonal/shoucang.png"
							mode=""></image>
						<image v-if="!info.attentionType"
							src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/perssonal/shoucang-active.png" mode="">
						</image>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="content">
			<view class="name">
				{{iteme.userName}}
			</view>
			<view class="attribute flex">
				<view class="gender flex justify-center align-center">
					<view class="icon flex justify-center align-center">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/perssonal/gender.png" mode="">
						</image>
					</view>
					<view class="text" v-if="iteme.userGender == 1">
						男
					</view>
					<view class="text" v-if="iteme.userGender == 0">
						女
					</view>
				</view>
				<view class="renzheng flex justify-center align-center" v-if="iteme.userNameType == 1">
					<view class="icon flex justify-center align-center">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/perssonal/shiming.png" mode="">
						</image>
					</view>
					<view class="text">
						已实名
					</view>
				</view>
			</view>
			<view class="workname" v-if="iteme.company&&iteme.position">
				公司·职位
			</view>
			<!-- <view class="workmsg">
				浙江杭州·互联网
			</view> -->
			<view class="visitors flex">
				<view class="it1 flex">
					<view class="name">
						访客
					</view>
					<view class="num">
						{{iteme.userVisitor}}
					</view>
				</view>
				<view class="it2 flex">
					<view class="name">
						粉丝
					</view>
					<view class="num">
						{{iteme.fansNum}}
					</view>
				</view>
			</view>
			<!-- <view class="textarea">
				我自横刀向天笑, 去留肝胆两昆仑
			</view> -->
		</view>
		<view style="width: 750rpx;
		height: 20rpx;
		background: #F6F6F6;">

		</view>
		<view class="list">
			<u-tabs font-size="28" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="experience"
				:style="{'height': `calc(100vh - ${contentHeight}px - 276rpx - 100rpx - env(safe-area-inset-bottom))`}">
				<swiper class="swiper" style="height: 100%;" :current="current">
					<swiper-item class="swiper-item" style="height: 100%;">
						<scroll-view class="scroll" scroll-y="true" style="height: 100%;">
							<view class="item">
								<view v-if="work.length != 0">
									<view class="job">
										工作经历
									</view>
									<view class="item-count flex" v-for="(it,index) in work" :key="index">
										<view class="left">
											<image :src="it.avatar" mode=""></image>
										</view>
										<view class="right">
											<view class="top">
												{{it.companyName}}
											</view>
											<view class="cente">
												{{it.jobName}}
											</view>
											<view class="bom">
												{{it.startDate}} 至 {{it.endDate}}
											</view>
										</view>
									</view>
									<view class="li">

									</view>
								</view>
								<view v-if="education.length != 0">
									<view class="education">
										教育经历
									</view>
									<view class="item-count flex" v-for="(it,index) in education" :key="index">
										<view class="left">
											<image :src="it.avatar" mode=""></image>
										</view>
										<view class="right">
											<view class="top">
												{{it.schoolName}}
											</view>
											<view class="cente flex">
												{{it.schoolSpecialty}}
												{{school(it.schoolType)}}
											</view>
											<view class="bom">
												{{it.startDate}} 至 {{it.endDate}}
											</view>
										</view>
									</view>
								</view>
								<view class="no flex justify-center align-center">
									暂无更多个人信息
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item" style="height: 100%;">
							<view style="height: 30rpx;width: 100%;">
								
							</view>
							<view class="item">
								<view class="topcar flex justify-between flex-column">
									<view class="dynamicnum flex">
										<view class="name">
											共发布动态
										</view>
										<view class="num">
											{{info.dynamicNum}}
										</view>
									</view>
									<view class="allnum flex">
										<view class="numname">
											获得评论
										</view>
										<view class="num">
											{{info.commentNum}}
										</view>
										<view class="vertical">
											|
										</view>
										<view class="numname">
											 赞
										</view>
										<view class="num">
											{{info.praiseNum}}
										</view>
										<view class="vertical">
											|
										</view>
										<view class="numname">
											 粉丝
										</view>
										<view class="num">
											{{info.fansNum}}
										</view>
									</view>
									<view class="focus" @click="focus">
										<view v-if="info.attentionType" class="btn flex justify-center align-center">
											已关注
										</view>
										<view v-if="!info.attentionType" class="btn flex justify-center align-center">
											<view class="icon">
												<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/square/%E6%96%B0%E5%A2%9E.png" mode=""></image>
											</view>
											<view class="text">
												关注
											</view>
										</view>
									</view>
								</view>
							</view>
						<scroll-view class="scroll1" scroll-y="true" :style="{'height': `calc(100vh - ${contentHeight}px - 174rpx - 276rpx - 100rpx - env(safe-area-inset-bottom))`}">
							<Recommended  isfocus="1" status="2" :item="item" v-for="(item,index) in info.attentionListVoList" :key="index"></Recommended>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	
	import Recommended from '@/components/recommended/recommended.vue'
	import  {viplist}  from '@/data/vip.js'
	export default {
		components:{
			Recommended
		},
		data() {
			return {
				iteme: {},
				tabbarTop: 0,
				height: 0,
				blackQurey:{
					id:''
				},
				piddheight: 0,
				contentHeight: 0,
				list: [{
					name: '个人信息'
				}, {
					name: '他的动态'
				}],
				work:[],
				education:[],
				current: 0,
				show: true,
				infoQurey:{
					userId:''
				},
				viplist,
				info:{},
				qurey:{
					userId:Number
				},
				shareId:''
			}
		},
		onShow() {
			this.init()
		},
		onShareAppMessage(res){
			 if (res.from === 'button') {// 来自页面内分享按钮
			      // let qurey={}
			      // qurey.attentionListId = this.shareId
			      // console.log(qurey)
			      // this.$post('/attentionList/attentionShareRecords',qurey)
				  setTimeout(this.share,500)
			    }
			return {
			      title: '我正在用山富职得找工作，快来和我一起吧！',
			      path: '/pages/circle/circle',
			    }
		
		},
		watch:{
			info(){
				
			},
			infoo(){
				
			},
		},
		methods: {
			//初始化
			init() {
				this._setTabbarTitleHeight()
				this._getContentHeight()
				this.getData()
			},
			async focus() {
				this.qurey.userId = uni.getStorageSync('center')
				let {
					data :attention
				} = await this.$post('/user/addAttention',this.qurey)
				await this.getData()
			},
			attentionShare(e){
				this.shareId = e
				console.log(this.shareId)
			},
			async share(){
				let qurey={}
				qurey.attentionListId = this.shareId
				console.log(qurey)
				await this.$post('/attentionList/attentionShareRecords',qurey)
				
			},
			async cancel(){
				this.blackQurey.id = uni.getStorageSync('center')
				let {data,code} = await this.$post('/user/pullBlack',this.blackQurey)
				console.log(data)
				if(code == 200){
					if(data == '拉黑成功'){
						uni.showToast({
							title: '拉黑成功',
							icon: 'none'
						})
						this.getData()
						uni.setStorageSync('fresh',true)
					}else{
						uni.showToast({
							title: '取消拉黑成功',
							icon: 'none'
						})
						this.getData()
						uni.setStorageSync('fresh',false)
					}
				}
				
			},
			school(id) {
				switch(id){
					case 0: return '中专'
					break;
					case 1: return '大专'
					break;
					case 2: return '本科'
					break;
					case 3: return '本科以上'
					break;
				}
			},
			async getData(){
				this.infoQurey.userId = uni.getStorageSync('center')
				let {
					data: info
				} = await this.$get('/user/userDetails',this.infoQurey)
				this.iteme = info
				let {
					data: infoo
				} = await this.$get('/user/userInformationAndDynamic',this.infoQurey)
				console.log(infoo)
				this.info = infoo
				this.education = infoo.getUserEducationExperienceList
				this.work = infoo.getUserWorkExperienceList
			},
			//tabs标签切换页面
			change(e) {
				this.current = e
			},
			img(e){
				return this.viplist[e].vip
			},
			//设置title高度
			_setTabbarTitleHeight() {
				let top = uni.getStorageSync('tabbarCapsule')
				this.tabbarTop = top.top + 'px'
				this.height = top.height + 'px'
				this.piddheight = top.height + top.top + 'px'
			},
			_getContentHeight() {
				uni.createSelectorQuery().select('.content').boundingClientRect(item => {
					this.contentHeight = item.height
				}).exec()
			},
			//返回按钮
			back() {
				uni.navigateBack({
					delta: 0
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		.tabbar {
			width: 750rpx;
			height: 276rpx;
			background-image: url('https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/perssonal/topbc.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;

			.tabbar-title {

				.icon {
					width: 38rpx;
					height: 38rpx;
					margin-left: 20rpx;
				}

				.title {
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
					background: #FFFFFF;
					position: absolute;
					bottom: -90rpx;
					left: 50%;
					transform: translateX(-50%);

					.imgs {
						width: 164rpx;
						height: 164rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.vip {
						position: absolute;
						bottom: 4rpx;
						right: -13rpx;
						width: 59rpx;
						height: 59rpx;
						border-radius: 50%;
						background: #FFFFFF;
						box-shadow: 0px 0px 9px 1px rgba(64, 64, 64, 0.22);

						.vipimg {
							width: 44rpx;
							height: 44rpx;
						}
					}
				}

				.right {
					margin-top: 10rpx;

					.lahei {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}

					.shouc {
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
		}

		.content {
			padding: 30rpx 30rpx 0;

			.name {
				font-weight: bold;
				color: #333333;
				font-size: 38rpx;
				line-height: 1;
				padding-top: 60rpx;
			}

			.attribute {
				.gender,
				.renzheng {
					display: inline-block;
					border: 2rpx solid #0265EB;
					border-radius: 4rpx;
					padding: 10rpx 12rpx;
					margin: 20rpx 20rpx 30rpx 0;

					.icon {
						width: 18rpx;
						height: 18rpx;
						margin-right: 10rpx;
					}

					.text {
						font-weight: 500;
						color: #0265EB;
						font-size: 20rpx;
						line-height: 1;
					}
				}
			}

			.workname {
				font-weight: bold;
				color: #333333;
				font-size: 28rpx;
				line-height: 1;
				padding-bottom: 20rpx;
			}

			.workmsg {
				font-weight: 500;
				color: #666666;
				font-size: 24rpx;
				margin: 20rpx 0;
				line-height: 1;
			}

			.visitors {

				.it1,
				.it2 {
					.name {
						font-weight: 500;
						color: #333333;
						font-size: 24rpx;
						line-height: 1;
						margin-right: 10rpx;
						padding-top: 0 !important;
					}

					.num {
						font-weight: bold;
						color: #333333;
						font-size: 28rpx;
						line-height: 1;
					}
				}

				.it1 {
					margin-right: 30rpx;
				}
			}

			.textarea {
				font-weight: 400;
				color: #999999;
				line-height: 36px;
				font-size: 24rpx;
			}
		}

		.list {
			.experience {
				.swiper {
					.swiper-item {
						.scroll {
							.item {
								padding: 0 30rpx;

								.job {
									font-weight: bold;
									color: #333333;
									font-size: 32rpx;
									line-height: 1;
									margin-top: 40rpx;
								}

								.li {
									//width: 690px;
									height: 1px;
									background: rgba(0, 0, 0, .12);
									margin-top: 40rpx;
								}

								.education {
									font-weight: bold;
									color: #333333;
									font-size: 32rpx;
									line-height: 1;
									margin-top: 40rpx;
								}

								.item-count {
									margin-top: 30rpx;

									.left {
										width: 70rpx;
										height: 70rpx;
										background: #E0E0E0;
										border-radius: 8rpx;
										margin-right: 20rpx;
									}

									.right {
										.top {
											font-weight: bold;
											color: #333333;
											font-size: 28rpx;
										}

										.cente {
											font-weight: 500;
											color: #333333;
											font-size: 24rpx;
											line-height: 1;
											margin: 28rpx 0 27rpx;
										}

										.bom {
											font-weight: 500;
											color: #333333;
											font-size: 24rpx;
										}
									}
								}

								.no {
									font-weight: 500;
									color: #999999;
									font-size: 24rpx;
									margin: 60rpx auto;
								}
								
							}
						}
						.topcar{
							width: 690rpx;
							height: 144rpx;
							background-image: url('https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/perssonal/centerbc.png');
							background-size: 100% 100%;
							background-repeat: no-repeat;
							margin-left: 30rpx;
							padding: 30rpx 0 30rpx 30rpx;
							position: relative;
							.dynamicnum{
								.name{
									font-weight: 500;
									color: #666666;
									font-size: 28rpx;
									margin-right: 10rpx;
									line-height: 1;
								}
								.num{
									font-weight: bold;
									color: #333333;
									font-size: 28rpx;
									line-height: 1;
								}
							}
							.allnum{
								font-weight: 500;
								color: #666666;
								font-size: 28rpx;
								line-height: 1;
								.numname{
									font-weight: 500;
									color: #666666;
									font-size: 28rpx;
									margin-right: 10rpx;
								}
								.num{
									font-weight: bold;
									color: #333333;
									font-size: 28rpx;
								}
								.vertical{
									font-weight: 500;
									color: #999999;
									font-size: 24rpx;
									margin: 0 10rpx;
								}
							}
							.focus{
								position: absolute;
								top: 23rpx;
								right: 32rpx;
								.btn{
									width: 107rpx;
									height: 44rpx;
									border: 1rpx solid #0265EB;
									border-radius: 8rpx;
									font-weight: 500;
									color: #0265EB;
									font-size: 24rpx;
									.icon{
										width: 32rpx;
										height: 32rpx;
									}
									.text{
										font-weight: 500;
										color: #0265EB;
										font-size: 24rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
